<template>
  <view>
    <view class="header-box">
      <view style="background-color: #fff; padding: 20rpx 0">
        <view class="search-box flex align-center">
          <image class="search-icon"
                 src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/search-icon.png"
                 mode="widthFix">
          </image>
          <input type="text" v-model="queryParams.searchValue" @confirm="searchHandel" placeholder="搜索">
        </view>
      </view>
      <view style="background-color: #fff;">
        <u-tabs :activeStyle="activeStyle" :current="current" lineColor="#FF7947" :list="tabList"
                @click="click"></u-tabs>
      </view>
    </view>

    <view class="item-box" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
      <view class="flex align-center justify-between top-price">
        <text class="price-title">租房费用</text>
        <view class="state-title">
          <dict-tag :options="dict.type.order_short_all_state" :value="item.orderState"/>
        </view>
      </view>
      <view class="flex house-box">
        <view class="img-wrapper">
          <image class="house-img" :src="item.apartmentPictureList[0]" mode="aspectFill"/>
        </view>

        <view>
          <!--<view class="main-title">{{item.housingAllocation.apartmentDescription}}</view>-->
          <u-text class="main-title" :lines="2" :text="item.housingAllocation.apartmentDescription"></u-text>
          <view class="tip-title">{{ item.house ? item.house.premisesAddress : '' }}</view>
          <view class="tip-title">{{ item.housingAllocation.title }}</view>
          <view class="order-amount">
            <view class="total-price">总金额￥{{ item.totalPrice ? item.totalPrice : 0 }}</view>
            <view class="coupon-price">优惠金额￥{{ item.couponPrice ? item.couponPrice : 0 }}</view>
          </view>
        </view>
      </view>
      <view class="actual-price">实付款￥{{ actualPrice(item) }}</view>
      <view class="time-box flex align-center">
        <image class="time-icon"
               src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/time-icon.png"/>
        {{ item.checkInTime|formatDate('MM月dd w') }} - {{ item.checkOutTime|formatDate('MM月dd w') }}
      </view>

      <view class="flex justify-end">
        <button class="pay-btn" @click.stop="payHandel(item)" v-if="['101','151'].includes(item.orderState)">立即支付
        </button>
      </view>
    </view>
    <u-loading-icon text="加载中" :show="loading"></u-loading-icon>
    <view v-if="!loading && total == 0" style="padding: 30rpx">
      <u-empty mode="order"/>
    </view>
  </view>
</template>

<script>
import {
  orderList,
  orderPay
} from '@/api/order';

export default {
  dicts: ["order_short_state", "order_short_all_state"],
  data() {
    return {
      activeStyle: {
        "font-weight": "800",
        "font-size": "32rpx",
        "color": "#111111"
      },
      inactiveStyle: {
        "font-weight": "500",
        "font-size": "26rpx",
        "color": "#595959"
      },
      tabList: [{
        name: '全部',
        value: '',
      }, {
        name: '待付款',
        value: '101',
      }, {
        name: '待入住',
        value: '103',
      }, {
        name: '已入住',
        value: '106',
      }, {
        name: '退房中',
        value: '107',
      }, {
        name: '已完成',
        value: '108',
      }],
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderState: '',
        searchValue: '',
      },
      current: 0,
      loading: false,
    }
  },
  computed: {
    actualPrice() {
      return (data) => {
        let coponPrice = data.couponPrice ? data.couponPrice : 0
        return data.totalPrice ? (data.totalPrice - coponPrice).toFixed(2) : 0
      }
    }
  },
  onLoad(opt) {
    if (opt.index) {
      this.current = Number(opt.index) + 1;
      this.queryParams.orderState = opt.orderState;
    }
    this.getList();
  },
  onShow() {
    this.resetForm();
    this.getList();
  },
  onReachBottom() {
    if (this.list.length < this.total) {
      this.queryParams.pageNum++;
      this.getList()
    }
  },
  methods: {
    searchHandel() {
      this.resetForm();
      this.getList();
    },
    payHandel(row) {
      let data = {
        orderId: row.orderId,
        openId: this.$store.state.user.userInfo.openid
      }
      orderPay(data).then(res => {
        let option = res.data;
        wx.requestPayment({
          timeStamp: option.timeStamp + "",
          nonceStr: option.nonceStr,
          package: option.package,
          signType: 'MD5',
          paySign: option.paySign,
          success: (success) => {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
            })
            setTimeout(() => {
              this.$tab.navigateTo('/pages/main/order/paySuccess?orderId=' + row.orderId)
              this.getList();
            }, 1000)
          },
          fail(err) {
            console.log('err', err);
            uni.showToast({
              title: '你已取消支付！',
              icon: 'none',
            })

          }
        })
      })


    },
    getList() {
      this.loading = true;
      orderList(this.queryParams).then(res => {
        this.loading = false;
        let list = res.rows;
        list.map(item => {
          item.apartmentPictureList = item.housingAllocation.apartmentPicture.split(',')
        })
        this.total = res.total;
        if (this.queryParams.pageNum == 1) {
          this.list = list; // 第一次请求数据，将数据保存到list中
        } else {
          this.list = this.list.concat(list); // 非第一次请求数据，将数据添加到list中
        }
      }).catch(e => {
        console.log(e)
        this.loading = false
      })
    },
    click(e) {
      this.resetForm();
      this.queryParams.orderState = e.value;
      this.getList();
    },
    resetForm() {
      this.queryParams.pageNum = 1;
      this.list = [];
      this.total = 0;
    },
    toDetail(row) {
      uni.navigateTo({
        url: `/pages/main/order/orderDetail?orderId=${row.orderId}`
      })
    }
  }
}
</script>

<style lang="scss">
.header-box {
  position: sticky;
  z-index: 999;
  top: 0;
}

.item-box {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 30rpx;
  width: 690rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;

  .pay-btn {
    // width: 160rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: #FF7947;
    border-radius: 34rpx 34rpx 34rpx 34rpx;
    border: 2rpx solid #FF7947;
    font-weight: 500;
    font-size: 26rpx;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin: 0;
  }

  .top-price {
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid rgba(112, 112, 112, 0.1);

    .state-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #006EFE;
      font-style: normal;
      text-transform: none;
    }
  }
  .actual-price {
    font-weight: bold;
    font-size: 28rpx;
    text-align: right;
    padding: 20rpx 0;
  }

  .time-box {
    width: 630rpx;
    height: 72rpx;
    background: #F5F7FB;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .time-icon {
      width: 27rpx;
      height: 28rpx;
      margin-left: 20rpx;
      margin-right: 10rpx;
    }
  }

  .house-box {
    margin-top: 24rpx;

    .img-wrapper {
      width: 132rpx;
      height: 132rpx;
      margin-right: 18rpx;

      .house-img {
        width: 132rpx;
        height: 132rpx;
        border-radius: 20rpx;

      }

    }


    .main-title {
      font-weight: 800;
      font-size: 28rpx;
      color: #111111;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 10rpx;
    }

    .tip-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #757575;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 10rpx;
    }
    .order-amount{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
      font-weight: bold;
      font-size: 24rpx;
      .total-price {
        color: #111111;
      }

      .coupon-price {
        color: #ee2a2a;
      }
    }

  }

  .price-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

}

.search-box {
  box-sizing: border-box;
  padding: 0 20rpx;
  width: 690rpx;
  height: 76rpx;
  margin-left: 30rpx;
  background: #F5F6FA;
  border-radius: 20rpx 20rpx 20rpx 20rpx;


  .search-icon {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
  }
}
</style>
